<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <!--<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>-->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="../lib/layui/css/layui.css" media="all">
    <meta charset="UTF-8">
    <title>点播</title>

    <style type="text/css">body {
        padding: 0px;
        font-family: "Microsoft YaHei", YaHei, "微软雅黑", SimHei, "黑体";
        font-size: 14px
    }</style>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script type="text/javascript" src="../js/xadmin.js"></script>
</head>

<body>
<form id="form1">
    <input id="videoUrl" type="hidden" name="videoUrl" th:value="${videoUrl}">
    <input id="time" type="hidden" name="time">
</form>
<table>
    <tr>
        <td valign="top" align="center" width="700px">
            <video width="600px" height="400px" autoplay="autoplay" id="myVideo" controls="controls" poster='预览图'
                   preload="auto"
                   x5-playsinline="" playsinline=""
                   webkit-playsinline="">
                <source th:src="${videoUrl}" type="video/mp4">
            </video>
        </td>
        <td>
            <form id="form2" action="/videoAnalysis/save" method="post" class="layui-form">

                视频名称:<input type="text" name="videoName" th:value="${videoName}" required="required"
                            class="layui-input"><br>
                摄像机点位名称:<input type="text" name="cameraName" required="required" class="layui-input"><br>
                物品种类:<br>
                <div class="layui-form-item" pane="">
                    <div class="layui-input-block">
                        <input name="goods" type="checkbox" lay-skin="primary" value="人" title="人"/>
                        <input name="goods" type="checkbox" lay-skin="primary" value="狗" title="狗"/>
                        <input name="goods" type="checkbox" lay-skin="primary" value="自行车" title="自行车"/>
                        <input name="goods" type="checkbox" lay-skin="primary" value="椅子" title="椅子"/>
                        <input name="goods" type="checkbox" lay-skin="primary" value="客车" title="客车"/><br>
                        <input name="goods" type="checkbox" lay-skin="primary" value="小轿车" title="小轿车"/>
                        <input name="goods" type="checkbox" lay-skin="primary" value="杯子" title="杯子"/>
                        <input name="goods" type="checkbox" lay-skin="primary" value="电动车" title="电动车"/>
                        <input name="goods" type="checkbox" lay-skin="primary" value="卡车" title="卡车"/>
                        <input name="goods" type="checkbox" lay-skin="primary" value="瓶子" title="瓶子"/><br>
                        <input name="goods" type="checkbox" lay-skin="primary" value="桌子" title="桌子"/>
                        <input name="goods" type="checkbox" lay-skin="primary" value="易拉罐" title="易拉罐"/>
                        <input name="goods" type="checkbox" lay-skin="primary" value="塑料袋" title="塑料袋"/>
                        <input name="goods" type="checkbox" lay-skin="primary" value="三轮车" title="三轮车"/>
                        <input name="goods" type="checkbox" lay-skin="primary" value="纸盒子" title="纸盒子"/><br>
                        <input name="goods" type="checkbox" lay-skin="primary" value="特种车" title="特种车"/>
                        <input name="goods" type="checkbox" lay-skin="primary" value="槽罐车" title="槽罐车"/>
                        <input name="goods" type="checkbox" lay-skin="primary" value="快餐盒" title="快餐盒"/>
                        <input name="goods" type="checkbox" lay-skin="primary" value="晾晒衣物" title="晾晒衣物"/>
                        <input name="goods" type="checkbox" lay-skin="primary" value="拖车" title="拖车"/>
                        <input name="goods" type="checkbox" lay-skin="primary" value="三角锥" title="三角锥"/>
                        <input name="goods" type="checkbox" lay-skin="primary" value="防撞桶" title="防撞桶"/><br>
                    </div>
                </div>
                场景:
                <select name="scene" onChange="showDiv(this.value)" lay-filter="demo">
                    <option value="请选择">请选择</option>
                    <option value="隧道">隧道</option>
                    <option value="高速">高速</option>
                    <option value="服务区">服务区</option>
                    <option value="园区">园区</option>
                    <option value="小区">小区</option>
                    <option value="城管">城管</option>
                </select>
                <br>
                事件类型:
                <div id="main">
                    <div id="请选择">择场景后显示</div>
                    <div id="城管" style="display: none">
                        <input name="event" type="checkbox" lay-skin="primary" value="机动车违停" title="机动车违停"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="非机动车违停" title="非机动车违停"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="环境卫生" title="环境卫生"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="出店经营" title="出店经营"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="游商经营" title="游商经营"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="违规晾晒" title="违规晾晒"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="犬类管理" title="犬类管理"/>
                    </div>
                    <div id="小区" style="display: none">
                        <input name="event" type="checkbox" lay-skin="primary" value="机动车违停" title="机动车违停"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="非机动车违停" title="非机动车违停"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="环境卫生" title="环境卫生"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="行人出没" title="行人出没"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="电梯区域" title="电梯区域"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="犬类管理" title="犬类管理"/>
                    </div>
                    <div id="园区" style="display: none">
                        <input name="event" type="checkbox" lay-skin="primary" value="机动车违停" title="机动车违停"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="非机动车违停" title="非机动车违停"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="环境卫生" title="环境卫生"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="行人出没" title="行人出没"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="电梯区域" title="电梯区域"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="犬类管理" title="犬类管理"/>
                    </div>
                    <div id="服务区" style="display: none">
                        <input name="event" type="checkbox" lay-skin="primary" value="客车停车场" title="客车停车场"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="货车停车场" title="货车停车场"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="轿车停车场" title="轿车停车场"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="环境卫生" title="环境卫生"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="出店经营" title="出店经营"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="车辆违停" title="车辆违停"/>
                    </div>
                    <div id="高速" style="display: none">
                        <input name="event" type="checkbox" lay-skin="primary" value="异常停车" title="异常停车"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="应急车道停车" title="应急车道停车"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="逆行" title="逆行"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="抛洒物" title="抛洒物"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="行人" title="行人"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="缓行" title="缓行"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="拥堵" title="拥堵"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="施工区域" title="施工区域"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="非机动车" title="非机动车"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="车祸" title="车祸"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="火灾" title="火灾"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="团雾" title="团雾"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="烟雾" title="烟雾"/>
                    </div>
                    <div id="隧道" style="display: none">
                        <input name="event" type="checkbox" lay-skin="primary" value="异常停车" title="异常停车"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="应急车道停车" title="应急车道停车"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="逆行" title="逆行"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="抛洒物" title="抛洒物"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="行人" title="行人"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="缓行" title="缓行"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="拥堵" title="拥堵"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="施工区域" title="施工区域"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="非机动车" title="非机动车"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="车祸" title="车祸"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="火灾" title="火灾"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="团雾" title="团雾"/>
                        <input name="event" type="checkbox" lay-skin="primary" value="烟雾" title="烟雾"/>
                    </div>

                </div>
                <br>
                时间:<select name="time">
                <option value="凌晨">凌晨</option>
                <option value="早晨">早晨</option>
                <option value="中午">中午</option>
                <option value="下午">下午</option>
                <option value="晚上">晚上</option>
            </select><br>
                天气:<select name="weather">
                <option value="阴天">阴天</option>
                <option value="雨天">雨天</option>
                <option value="晴天">晴天</option>
                <option value="雾天">雾天</option>
                <option value="雪天">雪天</option>
            </select><br>
                <input type="button" value="获取当前帧" onclick="getCurrentTime()" class="layui-btn layui-btn-sm"><br>
                <img id="img" alt="请获取当前帧" src=""><br>
                <div>
                    <!--                    <button type="submit" class="layui-btn layui-btn-sm">立即提交</button>-->
                    <button type="button" class="layui-btn layui-btn-sm" lay-filter="add" lay-submit="">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
                </div>
            </form>
        </td>
    </tr>
</table>

<!--根据选项切换内容-->
<script language="javascript" type="text/javascript">
    function showDiv(Names) {
        // alert(Names);
        $('#main>div').attr("style", "display: none");
        document.getElementById(Names).setAttribute("style", "");
    }
</script>

<script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use('form', function () {
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功

        //……

        //但是，如果你的HTML是动态生成的，自动渲染就会失效
        //因此你需要在相应的地方，执行下述方法来进行渲染
        form.render();
    });
    layui.use(['layer', 'jquery', 'form'], function () {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;

        form.on('select(demo)', function (data) {
            showDiv(data.value)
        });


        //监听提交
        form.on('submit(add)',
            function (data) {
                console.log(data);
                //发异步，把数据提交给php
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/videoAnalysis/save",//url
                    data: $('#form2').serialize(),
                    success: function (result) {
                        console.log(result);
                        if (result) {
                            layer.alert("增加成功", {
                                    icon: 6
                                },
                                function () {
                                    //关闭当前frame
                                    xadmin.close();
                                    // 可以对父窗口进行刷新
                                    xadmin.father_reload();
                                });
                        }
                    },
                    error: function () {

                        alert("程序错误");

                    }
                });
                return false;
            });

    });

</script>

<script>
    //获取视频DOM元素
    var myVideo = document.getElementById("myVideo");

    myVideo.oncanplay = function () {
        console.log("准备就绪");

    };
    //监听播放开始
    myVideo.addEventListener('play', function () {
        console.log("开始播放");
    });

    //监听播放结束
    myVideo.addEventListener('pause', function () {
        console.log("播放暂停");
    });

    //监听播放结束
    myVideo.addEventListener('ended', function () {
        console.log("播放结束");
    });

    //使用事件监听方式捕捉事件， 此事件可作为实时监测video 播放状态
    myVideo.addEventListener("timeupdate", function () {
        var timeDisplay;
        //用秒数来显示当前播放进度
        timeDisplay = Math.floor(myVideo.currentTime);
        console.log(Math.floor(myVideo.currentTime));

        //当视频播放到 4s的时候做处理
        if (timeDisplay == 4) {
            //处理代码
        }
    }, false);

    var getCurrentTime = function () {
        // alert(Math.floor(myVideo.currentTime));
        $("#time").val(Math.floor(myVideo.currentTime));
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "text",//预期服务器返回的数据类型
            url: "/file/saveCurrentImage",//url
            data: $('#form1').serialize(),
            success: function (result) {
                console.log(result);
                if (result != null) {
                    alert("成功");
                    $("#img").attr("width", "600px");
                    $("#img").attr("height", "400px");
                    $("#img").attr("src", result);
                }
            },
            error() {
                alert("失败")
            }
        });
    }
</script>
</body>

</html>